{extend name="default/layout" /}

{block name="title"}{$title}{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li><a href="/" class="hover:text-blue-600">首页</a></li>
            <li><span class="mx-2">/</span></li>
            <li><a href="{$goods.url}" class="hover:text-blue-600">{$goods.name}</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-900">{$chapter.title}</li>
        </ol>
    </nav>

    <div class="mx-auto">
        <!-- 章节标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">{$chapter.title}</h1>
            <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center space-x-1">
                    <i class="fas fa-cloud text-blue-500"></i>
                    <span>云盘资源</span>
                </span>
                <span>所属商品：{$goods.name}</span>
            </div>
        </div>

        <!-- 云盘内容 -->
        <div class="bg-white rounded-sm  border p-6">
            {if $has_auth}
                {if $chapter.cloud_url}
                <!-- 云盘信息 -->
                <div class="bg-blue-50 rounded-sm p-6 mb-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-500 rounded-sm flex items-center justify-center mr-4">
                            <i class="fas fa-cloud text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-900">云盘下载</h3>
                            <p class="text-sm text-gray-500">点击下方链接访问云盘资源</p>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">下载链接：</label>
                            <div class="flex items-center space-x-2">
                                <input 
                                    type="text" 
                                    value="{$chapter.cloud_url}" 
                                    readonly 
                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm"
                                    id="cloudUrl"
                                >
                                <button 
                                    onclick="copyToClipboard('cloudUrl')" 
                                    class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
                                >
                                    <i class="fas fa-copy mr-1"></i>复制
                                </button>
                                <a 
                                    href="{$chapter.cloud_url}" 
                                    target="_blank" 
                                    class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors text-sm"
                                >
                                    <i class="fas fa-external-link-alt mr-1"></i>访问
                                </a>
                            </div>
                        </div>
                        
                        {if $chapter.cloud_password}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">提取密码：</label>
                            <div class="flex items-center space-x-2">
                                <input 
                                    type="text" 
                                    value="{$chapter.cloud_password}" 
                                    readonly 
                                    class="px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm w-32"
                                    id="cloudPassword"
                                >
                                <button 
                                    onclick="copyToClipboard('cloudPassword')" 
                                    class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
                                >
                                    <i class="fas fa-copy mr-1"></i>复制
                                </button>
                            </div>
                        </div>
                        {/if}
                    </div>
                </div>
                {/if}
                
                {if $chapter.content}
                <!-- 资源描述 -->
                <div>
                    <h3 class="text-lg font-medium text-gray-900 mb-3">资源说明</h3>
                    <div class="prose max-w-none">
                        {$chapter.content|raw}
                    </div>
                </div>
                {/if}
            {else}
                <div class="text-center py-12">
                    <div class="mb-4">
                        <i class="fas fa-lock text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">云盘资源已锁定</h3>
                    <p class="text-gray-500 mb-6">购买商品后即可获取云盘下载链接</p>
                    <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-shopping-cart mr-2"></i>
                        立即购买
                    </a>
                </div>
            {/if}
        </div>

        <!-- 返回商品详情 -->
        <div class="mt-6 text-center">
            <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                返回商品详情
            </a>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999);
    document.execCommand('copy');
    
    // 简单的提示
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check mr-1"></i>已复制';
    button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
    button.classList.add('bg-green-600');
    
    setTimeout(() => {
        button.innerHTML = originalText;
        button.classList.remove('bg-green-600');
        button.classList.add('bg-blue-600', 'hover:bg-blue-700');
    }, 2000);
}
</script>
{/block}
